<template>
  <a-card :bordered="false">
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :xl="10" :lg="11" :md="12" :sm="24">
            <a-form-item :label="$t('时间')">
              <a-date-picker
                :show-time="{ defaultValue: moment('00:00:00', 'HH:mm:ss') }"
                valueFormat="YYYY-MM-DD HH:mm:ss"
                :placeholder="$t('请选择开始时间')"
                class="query-group-cust"
                v-model="queryParam.beginTime"
                style="min-width: calc(50% - 10px)"
              ></a-date-picker>
              <span class="query-group-split-cust"></span>
              <a-date-picker
                :show-time="{ defaultValue: moment('23:59:59', 'HH:mm:ss') }"
                valueFormat="YYYY-MM-DD HH:mm:ss"
                :placeholder="$t('请选择结束时间')"
                class="query-group-cust"
                v-model="queryParam.endTime"
                style="min-width: calc(50% - 10px)"
              ></a-date-picker>
            </a-form-item> </a-col
          ><a-col :xl="8" :lg="9" :md="10" :sm="24">
            <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">{{ $t('查询') }}</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">{{ $t('重置') }}</a-button>
            </span>
          </a-col></a-row
        >
      </a-form>
    </div>
    <div style="display: flex;flex-wrap: wrap;">
      <div class="g-charts" style="width: 800px; height: 450px;" id="myChart1"></div>
      <div class="g-charts"
        style="width: calc(100% - 840px);min-width:400px; height: 450px; box-shadow: 3px 3px 5px rgba($color: #777, $alpha: 0.2)"
        id="myChart2"
      ></div>
    </div>
  </a-card>
</template>

<script>
import moment from 'moment'
import { getAction } from '@/api/manage'
let myChart1, myChart2
export default {
  name: 'GoodsSaleAnalysis',
  data() {
    return {
      moment,
      description: '商品销售分析',
      dataSource: [],
      dataSource1: [],
      queryParam: {
        beginTime: moment().format('YYYY-MM-DD 00:00:00'),
        endTime: moment().format('YYYY-MM-DD 23:59:59'),
        orderType: 0,
      },
      url: {
        list: '/report/day/phySaleConvert/list',
      },
    }
  },
  mounted() {
    let that = this
    that.searchQuery()
    setTimeout(function () {
      that.getData()
    }, 1)
  },
  watch: {
    dataSource(nList) {
      this.test1(nList)
    },
    dataSource1(nList) {
      this.test2(nList)
    },
  },
  methods: {
    getData() {
      let that = this
      myChart1 = that.$echarts.init(document.getElementById('myChart1'))
      myChart1.showLoading({
        text: 'loading',
        color: '#000',
        maskColor: 'rgba(255, 255, 255, 0.8)',
      })
      myChart2 = that.$echarts.init(document.getElementById('myChart2'))
      myChart2.showLoading({
        text: 'loading',
        color: '#000',
        maskColor: 'rgba(255, 255, 255, 0.8)',
      })
    },
    test1(list) {
      let that = this
      myChart1 = that.$echarts.init(document.getElementById('myChart1'))
      myChart1.hideLoading()
      myChart1.clear()
      myChart1.setOption({
        title: {
          show: false,
          text: that.$t('销售数量占比'),
          left: 'center',
        },
        backgroundColor: '#fff',
        series: [
          {
            type: 'wordCloud',
            //size: ['100%', '100%'],
            /* autoSize: {
                enable: true,
                minSize: 12
              }, */
            //用来调整词之间的距离
            gridSize: 2,
            //用来调整字的大小范围
            // Text size range which the value in data will be mapped to.
            // Default to have minimum 14px and maximum 60px size.
            sizeRange: [14, 50],
            // Text rotation range and step in degree. Text will be rotated randomly in range [-90,                                                                             90] by rotationStep 45
            //用来调整词的旋转方向，，[0,0]--代表着没有角度，也就是词为水平方向，需要设置角度参考注释内容
            rotationRange: [-80, 80],
            //随机生成字体颜色
            // maskImage: maskImage,
            drawOutOfBound: true,
            textStyle: {
              normal: {
                color: function () {
                  return (
                    'rgb(' +
                    Math.round(Math.random() * 240) +
                    ', ' +
                    Math.round(Math.random() * 240) +
                    ', ' +
                    Math.round(Math.random() * 240) +
                    ')'
                  )
                },
              },
            },
            //位置相关设置
            // Folllowing left/top/width/height/right/bottom are used for positioning the word cloud
            // Default to be put in the center and has 75% x 80% size.
            left: 'center',
            top: 'center',
            width: '95%',
            height: '95%',
            //数据
            data: that.dataPieAxios(list, 'amount', 'goodsName'),
          },
        ],
      })
    },
    test2(list) {
      let that = this
      myChart2 = that.$echarts.init(document.getElementById('myChart2'))
      myChart2.hideLoading()
      myChart2.clear()
      let data = that.dataPieAxios(list, 'amount', 'goodsName')
      myChart2.setOption({
        title: {
          show: false,
          text: that.$t('销售数量占比'),
          left: 'center',
        },
        tooltip: {
          trigger: 'item',
          formatter: '{b}: {c} ({d}%)',
        },
        legend: {
          orient: 'vertical',
          right: 50,
          top: 'center',
          icon: 'circle',
          data: that.dataBarOrLineAxios(list, 'goodsName'),
          formatter: function (name) {
            var target
            for (var i = 0, l = data.length; i < l; i++) {
              if (data[i].name == name) {
                target = data[i].value
              }
            }
            var arr = [name + '：' + target]
            return arr.join('\n')
          },
          type: 'scroll',
          pageIconColor: '#444',
          pageIconInactiveColor: '#eee',
        },
        series: [
          {
            name: that.$t('销售数量占比'),
            type: 'pie',
            radius: ['40%', '60%'],
            center: ['30%', '50%'],
            data: data,
            label: {
              normal: {
                show: true,
                position: 'inner',
                formatter: '{d}%',
              },
            },
          },
        ],
      })
    },
    dataBarOrLineAxios(list, arg) {
      let dataAxios = []
      list.forEach((lt) => {
        dataAxios.push(lt[arg])
      })
      return dataAxios
    },
    dataPieAxios(list, arg1, arg2) {
      let dataAxios = []
      list.forEach((lt) => {
        dataAxios.push({
          value: lt[arg1],
          name: lt[arg2],
        })
      })
      return dataAxios
    },
    searchQuery() {
      let that = this
      getAction(that.url.list, that.queryParam).then((res) => {
        if (res.success) {
          that.dataSource = res.result
        } else {
          that.dataSource = []
          that.$message.error(res.message)
        }
        getAction(that.url.list, Object.assign({},that.queryParam, { limit: 10 })).then((res) => {
          if (res.success) {
            that.dataSource1 = res.result
          } else {
            that.dataSource1 = []
            that.$message.error(res.message)
          }
        })
      })
    },
    searchReset() {
      let that = this
      that.queryParam = {
        beginTime: moment().format('YYYY-MM-DD 00:00:00'),
        endTime: moment().format('YYYY-MM-DD 23:59:59'),
        orderType: 0,
      }
      that.searchQuery()
    },
  },
}
</script>

<style scoped lang="scss">
.g-charts {
  box-shadow: 0px 0px 5px rgba($color: #777, $alpha: 0.2);
  margin: 10px;
}
</style>